<template>
  <el-card>
    <div slot="header" v-if="showTitle">
      <span>{{ appData.name }}</span>
    </div>
    <el-container>
      <el-aside width="200px" style="background-color: white">
        <rva-tcrud-config :app="appData" :requestParams="requestParams" @rva-button-click="handleButtonClick"></rva-tcrud-config>
        <el-tree :load="loadNode" lazy @node-click="treeClick" :highlight-current="true" node-key="propKeyValue" ref="tcrudTree">
        </el-tree>
      </el-aside>
      <el-main>
        <template v-for="item in contents">
          <el-card>
            <div slot="header">
              <span>{{ item.name }}</span>
            </div>
            <template v-if="item.relatedAppType == 'form'">
              <component :is="'rva-' + item.relatedAppType" :requestParams="treeCrudParams"
                         :viewId="item.relatedAppId" :key="item.id" @rva-button-click="handleButtonClick"
              ></component>
            </template>
            <template v-if="item.relatedAppType == 'list' || item.relatedAppType == 'search'">
              <component :is="'rva-' + item.relatedAppType" :requestParams="treeCrudParams"
                         :viewId="item.relatedAppId" :queryParams="queryParams" :key="item.id"
              ></component>
            </template>
            <template v-if="item.app">
              <component :is="'rva-' + item.relatedAppType" :requestParams="treeCrudParams"
                         :appId="item.relatedAppId" :key="item.id"
              ></component>
            </template>
          </el-card>
		    </template>
      </el-main>
    </el-container>
  </el-card>
</template>

<script>
import RvaCrud from "@/components/rva/crud";
import RvaForm from "@/components/rva/form";
import RvaList from "@/components/rva/list";
import RvaSearch from "@/components/rva/search";
import RvaTcrudConfig from "@/components/rva/tcrud/config";

import request from '@/utils/request'
import {handleRvaButtonClick, loadCrud} from "@/api/rva/crud";
import {RvaUtils} from "@/api/rva/util";

export default {
  name: "rva-tcrud",
  components: {
    "rva-crud": RvaCrud,
    "rva-form": RvaForm,
    "rva-list": RvaList,
    "rva-search": RvaSearch,
    "rva-tcrud-config": RvaTcrudConfig
  },
  props:['appId', 'requestParams', 'showTitle'],
  data() {
    return {
      // 应用元数据
      appData: {},
      contents: [],
      treeCrudParams: {
        trigger: 0,
        treeCrudId: '',
        treeCrudNodeValue: ''
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 显示搜索条件
        showSearch: true,
        trigger: 0
      }
    };
  },
  created() {
    // this.loadAppData();
  },
  methods: {
    loadNode (node, resolve) {
      console.log ('node', node);
      if (node.level == 0) {
        loadCrud(this.appId).then(response => {
          this.appData = response.data;
          this.loadNodeData(node, resolve);
        });
      } else {
        this.loadNodeData(node, resolve);
      }
    },
    getParams (nodeData) {
      let params = RvaUtils.clone(this.requestParams, {}, true);
      RvaUtils.clone(nodeData, params, true);
      params.treeCrudNodeValue = nodeData ? nodeData.keyPropValue : '';
      params.treeCrudId = nodeData ? nodeData.treeCrudId : '';
      return params;
    },
    loadNodeData (node, resolve) {
      var url = RvaUtils.parseValue(this.appData.data, 'urlLoadNode', ['/rva/tcrud/', this.appId, '/load/node'].join(''));
      console.log (url);
      request({
        url,
        method: 'post',
        data: this.getParams(node.data)
      }).then (response => {
        console.log ('loadNode - response', response);
        let result = resolve(response.rows);
        if (response.rows && response.rows.length > 0) {
          // var me = this;
          this.$nextTick(() => {
            this.$refs.tcrudTree.setCurrentKey(response.rows[0].keyPropValue);
            this.treeClick(response.rows[0]);
          })
        }
        return result;
      });
    },
    treeClick (nodeData, node) {
      var url = RvaUtils.parseValue(this.appData.data, 'urlLoadContent', ['/rva/tcrud/', this.appId, '/load/content'].join(''));
      request({
        url,
        method: 'post',
        data: this.getParams(nodeData)
      }).then (response => {
        this.contents = response.data;
        console.log ('this.contents', this.contents);
        RvaUtils.clone(this.requestParams, this.treeCrudParams);
        this.treeCrudParams['treeCrudNodeValue'] = nodeData.keyPropValue;
        this.treeCrudParams['treeCrudId'] = nodeData.treeCrudId;
        this.treeCrudParams.trigger ++;
        console.log('treeClick', nodeData, this.treeCrudParams);
      });
    },
    handleButtonClick(data) {
      handleRvaButtonClick(this, data);
    },
  }
};
</script>
